<template>
	<p>
		<a-space style="float: left; margin-bottom: 20px">
			<train-select-view v-model="paramList.trainCode" width="200px"/>
			<a-button type="primary" @click="handleQuery()">查询</a-button>
		</a-space>
	</p>
	<a-table :columns="columns"
	         :dataSource="trainSeatList"
	         :loading="loading"
	         :pagination="pagination"
	         @change="handleTableChange">
		<template #bodyCell="{ column, record }">
			<template v-if="column.dataIndex === 'col'">
        <span v-for="item in SEAT_COL_ARRAY" :key="item.code">
          <span v-if="item.code === record.col && item.type === record.seatType">
            {{ item.desc }}
          </span>
        </span>
			</template>
			<template v-else-if="column.dataIndex === 'seatType'">
        <span v-for="item in SEAT_TYPE_ARRAY" :key="item.code">
          <span v-if="item.code === record.seatType">
            {{ item.desc }}
          </span>
        </span>
			</template>
		</template>
	</a-table>
</template>

<script>
import {defineComponent, onMounted, ref} from 'vue';
import {notification} from 'ant-design-vue';
import axios from 'axios';
import TrainSelectView from '@/components/train-select.vue';

export default defineComponent({
	name: 'train-seat-view',
	components: {TrainSelectView},
	setup(){
		/**
		 * 获取座位类型
		 */
		const SEAT_TYPE_ARRAY = window.SEAT_TYPE_ARRAY;
		/**
		 * 获取列号类型
		 */
		const SEAT_COL_ARRAY = window.SEAT_COL_ARRAY;
		/**
		 * 火车座位列表
		 */
		const trainSeatList = ref([]);
		/**
		 * 判断是否展示loading
		 */
		let loading = ref(false);
		/**
		 * 搜索条件列表
		 */
		let paramList = ref({
			trainCode: null
		});
		/**
		 * 火车座位对象
		 */
		let trainSeat = ref({
			id: undefined,
			trainCode: undefined,
			carriageIndex: undefined,
			row: undefined,
			col: undefined,
			seatType: undefined,
			carriageSeatIndex: undefined,
			createTime: undefined,
			updateTime: undefined,
		});

		// 分页的三个属性名是固定的
		const pagination = ref({
			total: 0,
			current: 1,
			pageSize: 10,
		});

		/**
		 * 火车座位列表头
		 */
		const columns = [
			{
				title: '车次编号',
				dataIndex: 'trainCode',
				key: 'trainCode',
			},
			{
				title: '厢序',
				dataIndex: 'carriageIndex',
				key: 'carriageIndex',
			},
			{
				title: '排号',
				dataIndex: 'row',
				key: 'row',
			},
			{
				title: '列号',
				dataIndex: 'col',
				key: 'col',
			},
			{
				title: '座位类型',
				dataIndex: 'seatType',
				key: 'seatType',
			},
			{
				title: '同车厢座序',
				dataIndex: 'carriageSeatIndex',
				key: 'carriageSeatIndex',
			},
			{
				title: '创建时间',
				dataIndex: 'createTime',
				key: 'createTime',
			},
			{
				title: '更新时间',
				dataIndex: 'updateTime',
				key: 'updateTime',
			}
		];

		/**
		 * 页面完全刷新调用函数
		 */
		onMounted(() => {
			// 页面刚刷新调用获取乘车人列表方法
			handleQuery({
				page: 1,
				size: pagination.value.pageSize
			});
		});

		/**
		 * 查询火车座位列表
		 */
		const handleQuery = (param) => {
			// 判断是否带分页参数，如果不带则赋值
			if(!param){
				param = {
					page: 1,
					size: pagination.value.pageSize
				};
			}
			// 显示loading图标
			loading.value = true;
			// 发送获取火车座位列表请求
			axios.get('/business/admin/train-seat/select-list-page', {
				params: {
					page: param.page,
					size: param.size,
					trainCode: paramList.value.trainCode
				}
			}).then((r) => {
				// 请求结束后隐藏loading图标
				loading.value = false;
				const {success, message, content} = r.data;
				// 判断请求是否成功
				if(success){
					// 成功之后保存火车座位列表
					trainSeatList.value = content.list;
					// 设置分页控件的值
					pagination.value.current = param.page;
					pagination.value.total = content.total;
				}else{
					notification.error({message: message});
				}
			});
		};

		/**
		 * 页面变化调用函数
		 */
		const handleTableChange = (pagination) => {
			// 设置分页
			handleQuery({
				page: pagination.current,
				size: pagination.pageSize
			});
		};

		return {
			trainSeat,
			trainSeatList,
			pagination,
			columns,
			handleTableChange,
			handleQuery,
			loading,
			SEAT_TYPE_ARRAY,
			SEAT_COL_ARRAY,
			paramList
		};
	},
});
</script>